4 - Navegació
1. Navegació i enrutament.
La navegació i l'enrutament és una característica essencial de les aplicacions de pàgina única (SPA) que permet organitzar la interfície d'usuari de l'aplicació en pàgines virtuals (views) i navegar entre elles mentre que l'URL de l'aplicació reflecteix l'estat actual de l'aplicació.
1.1. Route
de Page
La ruta de l'aplicació per defecte, si l'usuari no la redefineix, és /. Totes les rutes comencen per /, per exemple /store, /authors/1/books/2. Es pot obtenir llegint la propietat page.route
.
Python | |
---|---|
Executeu l'anterior codi a un navegador. Obriu una nova pestanya o finestra i afegiu a la URL del navegador la paraula prova, per exemple: http://127.0.0.1:8080/prova.
El resultat ara serà Ruta inicial: /prova
1.2. L'esdeveniment on_route_change
Cada vegada que es canvia la ruta a l'URL, ja siga editant l'URL o navegant per l'historial del navegador amb els botons Enrere/Endavant, Flet crida al controlador de l'esdeveniment page.on_route_change
:
Python | |
---|---|
La ruta també es pot canviar per codi, assignant la propietat page.route
.
Fem clic al botó "Anar a la tenda" i veurem que l'URL de l'aplicació canvia i s'introdueix un element nou a l'historial del navegador. Ara també podem utilitzar el botó "Enrere" del navegador per navegar a una ruta anterior.
2. Page views (vistes)
Ara Page
no és només una pàgina única, sinó un contenidor per a les diferents vistes, apilades en capes una sobre l'altra com un sandvitx:
L'historial de navegació és una llista de vistes. Page
té la propietat page.views
per accedir a aquesta llista.
L'última vista de la llista és la que es mostra actualment, i la llista de visualitzacions ha de tindre almenys un element (vista arrel).
Per simular una transició entre pàgines canviem page.route
i afegim una nova vista al final de la llista page.views
.
Obrim l'última vista de la col·lecció i canviem la ruta a una anterior al controlador page.on_view_pop
per tornar enrere.
2.1. Navegació entre vistes. Control AppBar
Per construir una navegació fiable, ha d'haver un únic lloc al programa que construisca la llista de vistes en funció de la ruta actual. En altres paraules, la pila d'historial de navegació (representada per la llista de visualitzacions) ha de ser una funció d'una ruta. El lloc adequat per fer-ho serà el controlador d'esdeveniments page.on_route_change
.
Navegació entre dues rutes amb diferent vista
Proveu a navegar entre les pàgines mitjançant els botons Visit Store
i Go home
. Utilitzant els botons del navegador Enrere/Endavant i canviant manualment la ruta a l'URL funciona igualment.
Page.go(route)
Per navegar entre les pàgines hem utilitzat page.go(route)
, un mètode que ens ajuda actualitzar page.route
, crida automàticament al controlador d'esdeveniments page.on_route_change
per a actualitzar les vistes i, finalment, crida a page.update()
.
El controlador page.on_view_pop
Observeu l'ús del controlador d'esdeveniments page.on_view_pop
. S'activa quan l'usuari fa clic al botó automàtic Enrere
al control AppBar. Al controlador, eliminem l'últim element de la col·lecció de vistes i naveguem fins a l'arrel de la vista.
3. Plantilla de rutes (TemplateRoute)
La classe TemplateRoute
és una classe d'utilitat basada en la biblioteca repath
que permet fer coincidir rutes semblants a ExpressJS i analitzar els seus paràmetres, per exemple /account/:account_id/orders/:order_id.
TemplateRoute s'integra molt bé amb l'esdeveniment de canvi de ruta:
A l'anterior codi, depenent de la ruta a la que es vol anar, es construiria una vista o una altra. Si anem a l'arrel o a /notes
, veurem la vista de totes les notes, en canvi, si anem a la ruta /notes/2
mostrarà la segona nota.
4. Controls per a navegació i accions
4.1. Barra d'eines. AppBar.
És una barra d'eines que ens facilita l'accés a les diferents opcions de l'aplicació. Apareix en la part superior de l'aplicació.
Algunes de les seues propietats principals són:
4.1.1. action
Una llista de Controls per mostrar en una fila després del control del títol.
Normalment, aquests controls solen ser IconButtons i representen operacions comunes. Per a operacions menys habituals, es sol utilitzar un PopupMenuButton en la última de les posicions.
4.1.2. leading
Control per mostrar abans del títol de la barra. Normalment, el control és una Icona un IconButton.
Exemple
4.2. NavigationRail
Un control que està pensat per mostrar-se a l'esquerra o a la dreta d'una aplicació per navegar entre un nombre reduït de vistes, normalment entre tres i cinc.
Exemple
4.3. Barra de navegació. NavigationBar.
Exemple